<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/button.css">
</head>
<style>
    .area{
        border: 1px solid rgba(0,0,0,0.1);
        border-width: 0 1px;
        background-image: url(./images/cloud-main-bg.png);
        display: flex;
        justify-content: space-between;
    }
    .area-left{
        width: 729px;
        padding: 20px 20px 40px;
    }
    .area-right{
        width: 250px;
    }
    .area-right .area-login{
        height: 126px;
        background-image: url('./images/sprite_03.png');
        width: 250px;
    }
    .area-right .area-login p{
        margin: 0 22.5px;
        padding: 16px 0;
        line-height: 22px;
    }
    .area-right .area-login a{
        display: block;
        width: 100px;
        height: 31px;
        background-image: url('./images/sprite_03.png');
        background-position: 0 -195px;
        margin: 0 75px;
        text-align: center;
        color: aliceblue;
        line-height: 31px;
    }
    .area-right .area-login a:hover{
        background-position: -110px -195px;

    }
    .settle-singer{
        padding: 20px;
    }
    .settle-singer ul{
        margin-top: 6px;
        padding-top: 15px;
    }
    .settle-singer ul li{
        width: 210px;
        height: 62px;
        background-color: bisque;
        display: flex;
        margin-bottom: 15px;
        cursor: pointer;
    }
    .settle-singer ul li:hover .singer-info{
        background-color: rgb(244,244,244);
    }
    .settle-singer ul li img{
        width: 62px;
        height: 62px;
    }
    .singer-info{
        border: 1px solid #e9e9e9;
        border-left: 0;
        width: 133px;
        padding-left: 14px;
        height: 62px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: rgb(250,250,250);
    }
    .singer-info h4{
        font-size: 14px;
    }
    .singer-info p{
        margin-top: 8px;
        margin-right: 12px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .hot-up{
        padding: 20px;
    }
    .hot-up ul{
        margin-top: 6px;
        padding-top: 15px;
        box-sizing: border-box;
    }
    .hot-up ul li{
        box-sizing: border-box;
        width: 210px;
        height: 50px;
        display: flex;
        justify-content:space-between;
    }
    .hot-up ul li div{
        height: 40px;
        box-sizing: border-box;
        padding: 4px 0;
        margin-left: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        overflow: hidden;
    }
    .hot-up ul li img{
        width: 40px;
        height: 40px;
    }
    .hot-up ul li div p{
        color: #000;
        height: 50%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .hot-up ul li p a{
        color: #666;
    }
</style>
<body>
    <div class="cloud-main">
        <div class="area warp_02 ">
            <div class="area-left">
            </div>
            <div class="area-right">
                <div class="area-login">
                    <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                    <a href="#">用户登录</a>
                </div>
                <div class="settle-singer">
                    <div class="header-small">
                        <h3>入驻歌手</h3>
                        <a href="#">查看更多&gt;</a>
                    </div>
                    <ul>
                        <li>
                            <img src="./images/张惠妹.jpg" alt="">
                            <div class="singer-info">
                                <h4>张惠妹aMEI</h4>
                                <p>台湾歌手张惠妹</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/张惠妹.jpg" alt="">
                            <div class="singer-info">
                                <h4>张惠妹aMEI</h4>
                                <p>台湾歌手张惠妹</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/张惠妹.jpg" alt="">
                            <div class="singer-info">
                                <h4>张惠妹aMEI</h4>
                                <p>台湾歌手2222222222222222张惠妹</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/张惠妹.jpg" alt="">
                            <div class="singer-info">
                                <h4>张惠妹aMEI</h4>
                                <p>台湾歌手张惠妹</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/张惠妹.jpg" alt="">
                            <div class="singer-info">
                                <h4>张惠妹aMEI</h4>
                                <p>台湾歌手张惠妹</p>
                            </div>
                        </li>
                    </ul>
                    <a class="apply" href="#">
                        <i class="apply-tent">申请成为网易音乐人</i>
                    </a>
                </div>
                <div class="hot-up">
                    <div class="header-small">
                        <h3>热门主播</h3>
                    </div>
                    <ul>
                        <li>
                            <img src="./images/陈立.jpg" alt="">
                            <div>
                                <p><a href="#">陈立</a></p>
                                <p>心理学家、美食家陈立教授</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/陈立.jpg" alt="">
                            <div>
                                <p><a href="#">陈立</a></p>
                                <p>男女双人全创作独立乐团</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/陈立.jpg" alt="">
                            <div>
                                <p><a href="#">陈立</a></p>
                                <p>32131231313232323232323232323131</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/陈立.jpg" alt="">
                            <div>
                                <p><a href="#">陈立</a></p>
                                <p>32131231313232323232323232323131</p>
                            </div>
                        </li>
                        <li>
                            <img src="./images/陈立.jpg" alt="">
                            <div>
                                <p><a href="#">陈立</a></p>
                                <p>32131231313232323232323232323131</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>